<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <title>Title</title>
</head>
<body>

<div id="app">

    <p>{{ message }}</p>
    <div v-for="(list,index) in listTeacher" :key="list.id">
        <a v-bind:href= "list.id"> {{ list.name }}</a>


    </div>

    <p>{{ add(2,3) }}</p>



</div>


<script>


    var listTeacher=[
        {
            id:1,
            name:"susu"
        },
        {
            id:2,
            name:"kangkang"
        }
    ]
   new Vue({
        el: '#app',
        data() {
            return{
                message: 'Hello/World',
                listTeacher:[]
            }
        },
        methods:{
            add(x,y){
                return x+y;
            }
        },
       created(){

            // this. listTeacher= listTeacher
           // const _this = this;
           axios.get('/listTeacher')
               .then( (res) => {
                   console.log(res.data)
                   var data = res.data;
                   console.log(this)
                   this.listTeacher = data
                   console.log(this.listTeacher)
               });
       }
    })





</script>

</body>
</html>